﻿<template>
    <div class="hidden h100 flex-column">
        <component is="style" />
        <el-tabs type="border-card" v-model="query.tab">
            <el-tab-pane :label="item.text" :name="item.id" v-for="item in urlList"></el-tab-pane>
        </el-tabs>
        <div class="padding-top-6 padding-left-10 text-right flex-row" v-if="urlList.length>0">
            <el-switch v-model="isAdd" :disabled="!optor.bucketName"></el-switch>
            <el-button icon="el-icon-refresh" circle class="margin-left-10" v-on:click="loadList"></el-button>
            <el-button icon="el-icon-plus" :disabled="!optor.bucketName" type="primary" circle class="margin-left-10" v-on:click="drawer=true"></el-button>
            <el-pagination background class="flex-row-fill" v-on:size-change="pagerSizeChange" v-on:current-change="pagerIndexChange" :current-page="query.pageIndex" :page-size="query.pageSize" layout="prev, pager, next, total, jumper, sizes" :total="query.rowCount" :small="true"></el-pagination>
        </div>
        <div class=" padding-tb-30" v-if="isAdd">
            <div class=" flex-row" style="justify-content:center;">
                <el-image style="width: 100px; height: 100px" :src="item" :preview-src-list="list" v-for="item in list" lazy></el-image>
            </div>
        </div>
        <div class="flex-column-fill">
            @*<el-row>
                    <el-col :span="8" v-for="(item,index) in imglist" >
                        <el-card :body-style="{ padding: '0px' }" v-on:click.stop="previewImg=index">
                            <img :src="item.miUrl+'?image/resize,m_fixed,w_100,h_100'" style="width: 100%; height: 200px" lazy :initial-index="previewImg" :preview-src-list="imglistpreview" v-on:click.stop="previewImg=index">
                            <div style="padding: 14px;">

                                <div class="bottom clearfix">
                                    <time class="time">{{ item.miDuration }}</time>
                                    <el-button type="text" class="button" v-on:click="imgDel(item,index)">删除</el-button>
                                </div>
                            </div>
                        </el-card>
                    </el-col>
                </el-row>*@
            <div class="flex-row" style="flex-wrap:wrap;justify-content:space-between;">
                <div v-for="(item,index) in imglist" class="text-center" style="width:200px">
                    <el-image style="width: 100%; height: 200px" :src="item.miUrl+'?image/resize,m_fixed,w_100,h_100'" lazy :initial-index="previewImg" :preview-src-list="imglistpreview" v-on:click="previewImg=index"></el-image>
                    <el-button type="danger" size="mini" icon="el-icon-delete" plain v-on:click="imgDel(item,index)" class="margin-bottom-10">删除</el-button>
                </div>

            </div>
        </div>
        <el-drawer custom-class="el-drawer-fix" :visible="drawer" size="800px" title="手动添加" :destroy-on-close="true" :close-on-press-escape="false" :wrapper-closable="false" :show-close="false">
            <div slot="title">
                <div class="flex-row">
                    <div class="flex-row-fill">手动添加</div>
                    <div>
                        <el-button type="danger" icon="el-icon-close" plain circle size="mini" v-on:click="drawer = false"></el-button>
                    </div>
                </div>
            </div>
            <div class="flex-column hidden" style="position:absolute;top:0;bottom:0;left:0;right:0;">
                <div class="flex-column-fill hidden-x" style="padding-bottom:50px;">
                    <js-media :value="mediaList" empty-text="请点击下方按钮添加图片" :fn="{audio:false,video:false,file:false,share:false,text:false,image:true}"></js-media>
                </div>
                <div class="padding-10 border-top-solid border-greyLight">
                    <el-button-group size="small">
                        <el-button type="info" plain v-on:click="drawer=false" icon="fa fa-rotate-left" size="small">取 消</el-button>
                        <el-button type="primary" icon="fa fa-check" size="small" v-on:click="submit">保 存</el-button>
                    </el-button-group>
                </div>
            </div>
        </el-drawer>
    </div>
</template>
<script>
    module = (function (hxt) {
        return {
            name: 'img',
            props: {

            },
            data: function () {
                var _this = this, optor = hxt.store.optor;
                return {
                    optor: optor,
                    query: { tab: 3 },
                    previewImg: 0,
                    obj: null,
                    urlList: [],
                    isAdd: false,
                    list: [],
                    imglist: [],
                    imglistpreview: [],
                    drawer: false,
                    mediaList:[],
                    query: {
                        tab:1,
                        pageIndex: 1,
                        pageSize: 30,
                        rowCount: 0

                    }
                }
            },
            computed: {

            },
            watch: {
                'query.tab': function (val) {
                    var _this = this;
                    if (!parseInt(val)) return;
                    _this.loadList();
                    _this.loadImg();
                },

            },
            activated: function () {
            },
            mounted: function () {
                var _this = this;
                _this.loadTitle();
                console.log(_this.optor)
            },
            methods: {
                loadTitle: function () {
                    var _this = this;
                    hxt.post({
                        url: hxt.config.link + 'pc/mediaInfoTitle',
                        data: { type: 2 },
                        ok: function (res) {
                            if (res.code != 0) return hxt.error('获取媒体组失败：' + res.errmsg);
                            _this.urlList = res.data;
                            var obj = res.data.find(function (item) { return item.isMain == 1 });
                            if (obj) {
                                _this.query.tab = obj.id;
                                _this.loadImg();
                            };
                        }
                    });
                },

                loadList: function () {
                    var _this = this,
                        obj = _this.urlList.find(function (item) { return item.id == _this.query.tab });
                    _this.obj = obj;
                    _this.loadImg();
                    if (!_this.isAdd) return;
                    _this.list = [];
                    if (_this.query.tab == 1) {
                        for (var i = 0; i < 10; i++) {
                            $.ajax({
                                url: obj.url,
                                type: "GET",
                                success: function (res1) {
                                    var mediaList = [{ miType: 2, miUrl: res1.data, miImgUrl: obj.url, miTitle: '【' + obj.text + '】-' + obj.title, miDesc: obj.url }];
                                    hxt.post({
                                        url: hxt.config.link + 'pc/mediaInfoSave',
                                        data: { miGroupKey: obj.groupKey, mediaList: encodeURI(JSON.stringify(mediaList)) },
                                        ok: function (res) {
                                            if (res.code != 0) return hxt.error('提交失败：' + res.errmsg);
                                            _this.loadImg();
                                        }
                                    });
                                }
                            });
                        }
                        return
                        var xhr = new XMLHttpRequest();
                        xhr.open('GET', obj.url, true);
                        xhr.responseType = "blob";
                        xhr.onload = function () {
                            if (xhr.status === 200) {
                                console.log(xhr.response);
                                var mediaList = [{ miType: 2, miUrl: xhr.response.data, miImgUrl: obj.url, miTitle: '【' + obj.text + '】-' + obj.title, miDesc: obj.url }];
                                hxt.post({
                                    url: hxt.config.link + 'pc/mediaInfoSave',
                                    data: { miGroupKey: obj.groupKey, mediaList: encodeURI(JSON.stringify(mediaList)) },
                                    ok: function (res) {
                                        if (res.code != 0) return hxt.error('提交失败：' + res.errmsg);
                                        _this.loadImg();
                                    }
                                });
                                return;
                                var file = new File([xhr.response], '111.jpeg', { type: 'image/jpeg' });
                                console.log(URL.createObjectURL(file), file)
                                hxt.uploadFile({
                                    signUrl: hxt.config.link + 'pc/v3OssToken',
                                    base64: null,
                                    file: file,
                                    compress: false,
                                    folder: _this.optor.bucketName + '/img/' + (_this.obj.id == 1 ? 'hs' : _this.obj.id == 2 ? 'meitui' : _this.obj.id == 3 ? 'jiuli' : _this.obj.id == 4 ? 'jk' : _this.obj.id == 5 ? 'mjx' : _this.obj.id == 17 ? 'wxy' : _this.obj.id == 19 ? 'xiaopu' : _this.obj.id == 14 ? 'mn' : 'upload') + '/',
                                    success: function (res) {
                                        console.log(res, 'res')
                                        var mediaList = [{ miType: 2, miUrl: res.url, miImgUrl: URL.createObjectURL(file), miTitle: '【' + obj.text + '】-' + obj.title, miDesc: obj.url }];
                                        hxt.post({
                                            url: hxt.config.link + 'pc/mediaInfoSave',
                                            data: { miGroupKey: obj.groupKey, mediaList: encodeURI(JSON.stringify(mediaList)) },
                                            ok: function (res) {
                                                if (res.code != 0) return hxt.error('提交失败：' + res.errmsg);
                                                _this.loadImg();
                                            }
                                        });
                                    },
                                    fail: function (err) {
                                        hxt.unmask();
                                        hxt.error('附件上传失败：' + err);
                                    }
                                });
                                return
                                var reader = new FileReader();
                                reader.onload = function (e) {

                                };
                                reader.readAsDataURL(file)
                            }
                            else {
                                hxt.error('下载失败：{0}（{1}）'.formatStr(xhr.status, xhr.statusText));
                            }
                        };
                        xhr.onerror = function (e) {
                            hxt.error('下载失败：Network request failed');
                        };
                        xhr.onloadstart = function () {
                            hxt.mask();
                        };
                        xhr.onloadend = function () {
                            hxt.unmask();
                        };
                        xhr.send(null);
                        return;
                        $.ajax({
                            url: obj.url,
                            type: "GET",
                            success: function (res1) {
                                hxt.post({
                                    url: hxt.config.link + 'pc/GetUrlToBase64',
                                    data: { url: res1.data },
                                    ok: function (res2) {
                                        console.log(res2)
                                        _this.list = [res2.data];
                                        if (res2.code != 0) return hxt.error('失败：' + res2.errmsg);

                                        //return
                                        hxt.uploadFile({
                                            signUrl: hxt.config.link + 'pc/v3OssToken',
                                            base64: res2.data,
                                            file: null,
                                            compress: false,
                                            folder: _this.optor.bucketName + '/img/' + (_this.obj.id == 1 ? 'hs' : _this.obj.id == 2 ? 'meitui' : _this.obj.id == 3 ? 'jiuli' : _this.obj.id == 4 ? 'jk' : _this.obj.id == 5 ? 'mjx' : _this.obj.id == 17 ? 'wxy' : _this.obj.id == 19 ? 'xiaopu' : _this.obj.id == 14 ? 'mn' : 'upload') + '/',
                                            success: function (res) {
                                                console.log(res, 'res')
                                                var mediaList = [{ miType: 2, miUrl: res.url, miImgUrl: res1.data, miTitle: '【' + obj.text + '】-' + obj.title, miDesc: obj.url }];
                                                hxt.post({
                                                    url: hxt.config.link + 'pc/mediaInfoSave',
                                                    data: { miGroupKey: obj.groupKey, mediaList: encodeURI(JSON.stringify(mediaList)) },
                                                    ok: function (res) {
                                                        if (res.code != 0) return hxt.error('提交失败：' + res.errmsg);

                                                    }
                                                });
                                            },
                                            fail: function (err) {
                                                hxt.unmask();
                                                hxt.error('附件上传失败：' + err);
                                            }
                                        });
                                    }
                                });
                            }
                        });

                    };
                    if (_this.query.tab == 4) {
                        var xhr = new XMLHttpRequest();
                        xhr.open('GET', obj.url, true);
                        xhr.responseType = "blob";
                        xhr.onload = function () {
                            if (xhr.status === 200) {
                                console.log(xhr.response);
                                var file = new File([xhr.response], '111.jpeg', { type: 'image/jpeg' });
                                console.log(URL.createObjectURL(file), file)
                                hxt.uploadFile({
                                    signUrl: hxt.config.link + 'pc/v3OssToken',
                                    base64: null,
                                    file: file,
                                    compress: false,
                                    folder: _this.optor.bucketName + '/img/' + (_this.obj.id == 1 ? 'hs' : _this.obj.id == 2 ? 'meitui' : _this.obj.id == 3 ? 'jiuli' : _this.obj.id == 4 ? 'jk' : _this.obj.id == 5 ? 'mjx' : _this.obj.id == 17 ? 'wxy' : _this.obj.id == 19 ? 'xiaopu' : _this.obj.id == 14 ? 'mn' : 'upload') + '/',
                                    success: function (res) {
                                        console.log(res, 'res')
                                        var mediaList = [{ miType: 2, miUrl: res.url, miImgUrl: URL.createObjectURL(file), miTitle: '【' + obj.text + '】-' + obj.title, miDesc: obj.url }];
                                        hxt.post({
                                            url: hxt.config.link + 'pc/mediaInfoSave',
                                            data: { miGroupKey: obj.groupKey, mediaList: encodeURI(JSON.stringify(mediaList)) },
                                            ok: function (res) {
                                                if (res.code != 0) return hxt.error('提交失败：' + res.errmsg);
                                                _this.loadImg();
                                            }
                                        });
                                    },
                                    fail: function (err) {
                                        hxt.unmask();
                                        hxt.error('附件上传失败：' + err);
                                    }
                                });
                                return
                                var reader = new FileReader();
                                reader.onload = function (e) {

                                };
                                reader.readAsDataURL(file)
                            }
                            else {
                                hxt.error('下载失败：{0}（{1}）'.formatStr(xhr.status, xhr.statusText));
                            }
                        };
                        xhr.onerror = function (e) {
                            hxt.error('下载失败：Network request failed');
                        };
                        xhr.onloadstart = function () {
                            hxt.mask();
                        };
                        xhr.onloadend = function () {
                            hxt.unmask();
                        };
                        xhr.send(null);
                    };
                    if (_this.query.tab == 2) {
                        for (var i = 0; i < 10; i++) {
                            $.ajax({
                                url: obj.url,
                                type: "GET",
                                success: function (res1) {
                                    var mediaList = [{ miType: 2, miUrl: res1.data, miImgUrl: obj.url, miTitle: '【' + obj.text + '】-' + obj.title, miDesc: obj.url }];
                                    hxt.post({
                                        url: hxt.config.link + 'pc/mediaInfoSave',
                                        data: { miGroupKey: obj.groupKey, mediaList: encodeURI(JSON.stringify(mediaList)) },
                                        ok: function (res) {
                                            if (res.code != 0) return hxt.error('提交失败：' + res.errmsg);
                                            _this.loadImg();
                                        }
                                    });
                                    return;
                                    hxt.post({
                                        url: hxt.config.link + 'pc/GetUrlToBase64',
                                        data: { url: res1 },
                                        ok: function (res2) {
                                            _this.list = [res2.data];
                                            if (res2.code != 0) return hxt.error('提交失败：' + res2.errmsg);

                                            hxt.uploadFile({
                                                signUrl: hxt.config.link + 'pc/v3OssToken',
                                                base64: res2.data,
                                                file: null,
                                                compress: false,
                                                folder: _this.optor.bucketName + '/img/' + (_this.obj.id == 1 ? 'hs' : _this.obj.id == 2 ? 'meitui' : _this.obj.id == 3 ? 'jiuli' : _this.obj.id == 4 ? 'jk' : _this.obj.id == 5 ? 'mjx' : _this.obj.id == 17 ? 'wxy' : _this.obj.id == 19 ? 'xiaopu' : _this.obj.id == 14 ? 'mn' : 'upload') + '/',
                                                success: function (res) {
                                                    var mediaList = [{ miType: 2, miUrl: res.url, miImgUrl: res1, miTitle: '【' + obj.text + '】-' + obj.title, miDesc: obj.url }];
                                                    hxt.post({
                                                        url: hxt.config.link + 'pc/mediaInfoSave',
                                                        data: { miGroupKey: obj.groupKey, mediaList: encodeURI(JSON.stringify(mediaList)) },
                                                        ok: function (res) {
                                                            if (res.code != 0) return hxt.error('提交失败：' + res.errmsg);

                                                        }
                                                    });
                                                },
                                                fail: function (err) {
                                                    hxt.unmask();
                                                    hxt.error('附件上传失败：' + err);
                                                }
                                            });
                                        }
                                    });

                                }
                            });
                        }
                    };
                    if (_this.query.tab == 3) {
                        $.ajax({
                            url: obj.url,
                            type: "GET",
                            success: function (res1) {
                                var mediaList = res1.img.map(function (item) { return { miType: 2, miUrl: item, miImgUrl: obj.url, miTitle: '【' + obj.text + '】-' + obj.title, miDesc: 'https://api.aa1.cn/', miDuration: res1.title }});
                                hxt.post({
                                    url: hxt.config.link + 'pc/mediaInfoSave',
                                    data: { miGroupKey: obj.groupKey, mediaList: encodeURI(JSON.stringify(mediaList)) },
                                    ok: function (res) {
                                        if (res.code != 0) return hxt.error('提交失败：' + res.errmsg);
                                        _this.loadImg();
                                    }
                                });
                                return
                                $.each(res1.img, function (index, item) {

                                    return
                                        hxt.post({
                                            url: hxt.config.link + 'pc/GetUrlToBase64',
                                            data: { url: item },
                                            ok: function (res2) {
                                                _this.list.push(res2.data);
                                                if (res2.code != 0) return hxt.error('提交失败：' + res2.errmsg);

                                                //return
                                                hxt.uploadFile({
                                                    signUrl: hxt.config.link + 'pc/v3OssToken',
                                                    base64: res2.data,
                                                    file: null,
                                                    compress: false,
                                                    folder: _this.optor.bucketName + '/img/' + (_this.obj.id == 1 ? 'hs' : _this.obj.id == 2 ? 'meitui' : _this.obj.id == 3 ? 'jiuli' : _this.obj.id == 4 ? 'jk' : _this.obj.id == 5 ? 'mjx' : _this.obj.id == 17 ? 'wxy' : _this.obj.id == 19 ? 'xiaopu' : _this.obj.id == 14 ? 'mn' : 'upload') + '/',
                                                    success: function (res) {
                                                        var mediaList = [{ miType: 2, miUrl: res.url, miImgUrl: item, miTitle: '【' + obj.text + '】-' + obj.title, miDesc: obj.url, miDuration: res1.title }];
                                                        hxt.post({
                                                            url: hxt.config.link + 'pc/mediaInfoSave',
                                                            data: { miGroupKey: obj.groupKey, mediaList: encodeURI(JSON.stringify(mediaList)) },
                                                            ok: function (res) {
                                                                if (res.code != 0) return hxt.error('提交失败：' + res.errmsg);

                                                            }
                                                        });
                                                    },
                                                    fail: function (err) {
                                                        hxt.unmask();
                                                        hxt.error('附件上传失败：' + err);
                                                    }
                                                });
                                            }
                                        });

                                    });

                            }
                        });
                    };
                    if (_this.query.tab == 5) {
                        $.ajax({
                            url: obj.url,
                            type: "GET",
                            success: function (res1) {
                                if (res1.code != 1) return hxt.error('加载失败：' + res1.msg);
                                var mediaList = res1.data.map(function (item) {
                                    return { miType: 2, miUrl: item.imageUrl, miBase64: null, miImgUrl: obj.url, miTitle: '【' + obj.text + '】-' + obj.title, miDesc: 'https://www.free-api.com/doc/577' }
                                });
                                console.log(mediaList)
                                hxt.post({
                                    url: hxt.config.link + 'pc/mediaInfoSave',
                                    data: { miGroupKey: obj.groupKey, mediaList: encodeURI(JSON.stringify(mediaList)) },
                                    ok: function (res) {
                                        if (res.code != 0) return hxt.error('提交失败：' + res.errmsg);
                                        _this.loadImg();
                                    }
                                });
                            }
                        });
                    };
                    if (_this.query.tab == 14) {
                        $.ajax({
                            url: obj.url,
                            type: "GET",
                            success: function (res1) {
                                if (res1.code != 200) return hxt.error('加载失败：' + res1.msg);
                                hxt.success(res1.title);
                                var mediaList = res1.img.map(function (item) {
                                    return { miType: 2, miUrl: item, miBase64: null, miImgUrl: obj.url, miTitle: '【' + obj.text + '】-' + obj.title, miDuration: res1.title }
                                });
                                console.log(mediaList)
                                hxt.post({
                                    url: hxt.config.link + 'pc/mediaInfoSave',
                                    data: { miGroupKey: obj.groupKey, mediaList: encodeURI(JSON.stringify(mediaList)) },
                                    ok: function (res) {
                                        if (res.code != 0) return hxt.error('提交失败：' + res.errmsg);
                                        _this.loadImg();
                                    }
                                });
                            }
                        });
                    };
                },
                pagerSizeChange: function (val) {
                    var _this = this;
                    _this.query.pageSize = val;
                    if (Math.ceil(_this.query.rowCount * 1.0000 / val) >= _this.query.pageIndex) _this.loadImg();
                },
                pagerIndexChange: function (val) {
                    var _this = this;
                    _this.query.pageIndex = val;
                    _this.loadImg();
                },
                loadImg: function () {
                    var _this = this,
                        obj = _this.urlList.find(function (item) { return item.id == _this.query.tab });
                    hxt.post({
                        url: hxt.config.link + 'pc/mediaInfoList',
                        data: { miGroupKey: obj.groupKey, pageSize: _this.query.pageSize, pageIndex: _this.query.pageIndex},
                        ok: function (res) {
                            if (res.code != 0) return hxt.error('加载失败：' + res.errmsg);
                            _this.imglist = res.data.list;
                            _this.query.pageSize = res.data.pageSize;
                            _this.query.pageIndex = res.data.pageIndex;
                            _this.query.rowCount = res.data.rowCount;
                            _this.imglistpreview = _this.imglist.map(function (item) { return item.miUrl });
                        }
                    });
                },
                imgDel: function (d,index) {
                    var _this = this;
                    hxt.post({
                        url: hxt.config.link + 'pc/_ossDel',
                        data: { miId: d.miId, url: d.miUrl },
                        ok: function (res) {
                            if (res.code != 0) return hxt.error('删除失败：' + res.errmsg);
                            hxt.success('删除成功');
                            _this.imglist.splice(index, 1);
                            _this.imglistpreview = _this.imglist.map(function (item) { return item.miUrl });
                        }
                    });
                },
                submit: function () {
                    var _this = this;
                    var saveToServer = function () {
                        hxt.unmask();
                        hxt.post({
                            url: hxt.config.link + 'pc/mediaInfoSave',
                            data: { miGroupKey: _this.obj.groupKey, mediaList: encodeURI(JSON.stringify(_this.mediaList)) },
                            ok: function (res) {
                                if (res.code != 0) return hxt.error('提交失败：' + res.errmsg);

                            }
                        });
                    };
                    var upload = function () {
                        var row = _this.mediaList.find(function (item) {
                            var url = ('' + item.miUrl).toLowerCase();
                            return item.miType != 1 && item.miType != 5 && !url.startsWith('http://') && !url.startsWith('https://');
                        });
                        if (!!row) {
                            hxt.uploadFile({
                                signUrl: hxt.config.link + 'pc/v3OssToken',
                                base64: row.miType == 2 ? row.miUrl : null,
                                file: row.miType != 2 ? row.miUrl : null,
                                compress: false,
                                folder: _this.optor.bucketName + '/img/' + (_this.obj.id == 1 ? 'hs' : _this.obj.id == 2 ? 'meitui' : _this.obj.id == 3 ? 'jiuli' : _this.obj.id == 4 ? 'jk' : _this.obj.id == 5 ? 'mjx' : _this.obj.id == 17 ? 'wxy' : _this.obj.id == 19 ? 'xiaopu' : _this.obj.id==14?'mn':'upload')+'/',
                                success: function (res) {
                                    row.miUrl = res.url;
                                    upload();
                                },
                                fail: function (err) {
                                    hxt.unmask();
                                    hxt.error('附件上传失败：' + err);
                                }
                            });
                        }
                        else {
                    saveToServer();
                }
                    };
                    hxt.mask();
                    upload();
                }

            },
            components: {
                jsMedia: function () { return hxt.staticComponent(@Html.Raw(this.vueComponent("~/Views/pc/My/Component/pc.media.cshtml"))); },
            }
        };
    })(window.$jscript.fn);
</script>
<style>
    .el-tab-pane {
        height: 100%;
    }

    .el-tabs__content {
        flex: 1;
    }

    .el-tabs--border-card > .el-tabs__content {
        padding: 0px !important;
    }

    .time {
        font-size: 13px;
        color: #999;
    }

    .bottom {
        margin-top: 13px;
        line-height: 12px;
    }

    .button {
        padding: 0;
        float: right;
    }

    .image {
        width: 100%;
        display: block;
    }

    .clearfix:before,
    .clearfix:after {
        display: table;
        content: "";
    }

    .clearfix:after {
        clear: both
    }
</style>